<template>
  <div class="infoContainer">
    <!-- 上传头像 -->
    <div class="left-box">
      <el-form :model="formData" :rules="rules" status-icon ref="ruleFormRef" label-width="8rem">
        <!-- 旧密码 -->
        <el-form-item prop="username" label="旧密码">
          <el-input :model-value.trim="formData.username" placeholder="旧密码" clearable>
          </el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item prop="role" label="新密码">
          <el-input :model-value.trim="formData.role" placeholder="新密码" clearable>
          </el-input>
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item prop="college" label="新密码">
          <el-input :model-value.trim="formData.college" placeholder="新密码" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="footer-button">确定</el-button>
          <el-button class="footer-button">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="right-box">
      <svg-icon icon-class="person-info-phone" class="svg-icon"></svg-icon>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 表单相关
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>()

// 表单数据
const formData = reactive({
  username: "", // 旧密码
  role: "", // 新密码
  college: "", //所属新密码
  major: "", // 专业
  grade: "", // 年级
  phoneNumber: 17899999999, // 手机号
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  role: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  college: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  major: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  grade: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
  phoneNumber: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

/**
 * 提交表单
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="scss" scoped>
.infoContainer {
  width: 100%;
  height: 50rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;

  .left-box {
    place-self: center;
    display: grid;
  }

  .right-box {
    place-self: center;
    justify-self: start;

    .svg-icon {
      width: 50rem;
      height: 50rem;
    }
  }

  // 调整 form 表单相关样式
  .el-form {
    // 调整表单宽度
    width: 40rem;

    // 调整 item 项之间的间隔
    .el-form-item {
      margin-top: 2.5rem;
    }

    .footer-button{
      padding: 0 2rem;
    }
  }
}
</style>
